import {Button, Modal, Form} from 'react-bootstrap';
import {useState} from 'react'
import ReconnectingWebSocket from "reconnecting-websocket";
import {websocketBase, checkNickName} from "../../service/service";

const RoomEnter = (props) => {
    const {connectSuccessCallback, messageCallback, checkRoomHasEnter} = props
    const [smShow, setSmShow] = useState(false);
    const [roomName, setRoomName] = useState("")
    const [nickName, setNickName] = useState("")
    const [invalidMsg,setInvalidMsg] = useState("")

    const connectWebsocket = async () => {
        if(checkRoomHasEnter(roomName)){
            setInvalidMsg("你已在此聊天室,不能重复进入")
            return
        }
        const hasSameName = await checkNickName(roomName, nickName)
        if (hasSameName) {
            setInvalidMsg("聊天室中已有相同昵称")
            return
        }

        const webSocketUrl = `${websocketBase}/${roomName}/${nickName}`
        const wsCon = new ReconnectingWebSocket(webSocketUrl);
        wsCon.addEventListener("open", () => {
            close()
            connectSuccessCallback(roomName, nickName, wsCon)
            console.log("open")
        });
        wsCon.addEventListener("message", e => {
            messageCallback(roomName, e.data)
        });
        wsCon.addEventListener("error", (e) => {
            console.error(e.message);
        });
        wsCon.addEventListener("close", () => {
            console.log("close")
        });


    };

    const close = () => {
        setSmShow(false)
        setNickName("")
        setRoomName("")
        setInvalidMsg("")
    }

    const buttonStyle = {
        display: "block",
        width: '100%',
        border: '1px #cecece solid',
        height: '4rem',
        backgroundColor: '#ffcc00',
        color: '#994c00'
    }
    
    const invalidMsgStyle={
        position: "relative",
        left: "10px",
        color: "red",
        fontSize: "10px"
    }
    return (
        <>
            <button style={buttonStyle} onClick={() => setSmShow(true)}>加入聊天室</button>
            <Modal
                size="sm"
                show={smShow}
                onHide={() => setSmShow(false)}
                aria-labelledby="example-modal-sizes-title-sm"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="example-modal-sizes-title-sm">
                        加入聊天室
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Form.Group className="mb-3" controlId="formBasicEmail">
                            <Form.Label>聊天室名称</Form.Label>
                            <Form.Control placeholder="输入聊天室名称" autoComplete="off"
                                          onChange={e => setRoomName(e.target.value)}/>
                        </Form.Group>

                        <Form.Group className="mb-3" controlId="formBasicPassword">
                            <Form.Label>您的昵称</Form.Label>
                            <Form.Control placeholder="输入您在此聊天室中的称呼" autoComplete="off"
                                          onChange={e => setNickName(e.target.value)}/>
                            {invalidMsg && <span style={invalidMsgStyle}>{invalidMsg}</span>}
                        </Form.Group>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="primary" onClick={connectWebsocket} disabled={roomName.length===0||nickName.length===0}>
                        确定
                    </Button>
                    <Button variant="primary" onClick={close}>
                        关闭
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    )
}

export default RoomEnter
